import { RefObject, useEffect, useEffectEvent, useRef, useState } from 'react'
import { UseCounter, useUnMounted } from '@/lib/hooks/useCounter'

function Box () {
    const { counter, increment } = UseCounter(100)

    useUnMounted( () => {
        console.log('uninstall: ', counter)
    })

    return (
        <div className={ 'p-20 bg-slate-300' }>
            <p>{ counter }</p>
            <button className={ 'py-3 px-5 bg-purple-400' }
                    onClick={ increment }>
                increment
            </button>
        </div>
    )
}

export function Event () {

    const [ show, setShow ] = useState<boolean>(true)

    return (
        <div className={ 'p-20 bg-rose-500' }>
            <button className={ 'py-3 px-5 mb-2 bg-purple-500' }
                    onClick={ () => setShow(prev => !prev) }>
                {
                    show ? 'hidden' : 'show'
                }
            </button>
            {
                show && <Box/>
            }
        </div>
    )
}
